<template>
  <el-dialog
    title="新增乐谱分类"
    :visible.sync="showFlag"
    custom-class="dialog-small"
    @close="closeDialog"
  >
    <el-form
      ref="formData"
      :model="formData"
      :rules="formRules"
      label-width="80px"
    >
      <el-form-item label="分类名称" prop="category">
        <el-input
          v-model="formData.category"
          placeholder="请输入分类名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="英文名称" prop="english">
       <el-input
          v-model="formData.english"
          placeholder="请输入分类英文名称"
        ></el-input>
      </el-form-item>
      <el-form-item class="dialog-footer" align="center">
        <el-button type="primary" @click="onSave('formData')">保 存</el-button>
        <el-button @click="onCancel('formData')">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { categoryAdd } from "../../config/interface";
export default {
  data() {
    const validate = (rule, value, callback) => {
      const reg = /^[0-9a-zA-Z\u4e00-\u9fa5]*$/g;
      if (!value) {
        callback(new Error("请输入完整信息"));
      }  else {
        callback();
      }
    };
    return {
      showFlag: false,
      formData: {
        category: "",
        english:''
      },
      formRules: {
        category: [{ validator: validate, trigger: "blur" }],
        english: [{ validator: validate, trigger: "blur" }]
      },
      reqFlag: {
        add: true,
      },
    };
  },
  components: {},
  created() {},
  methods: {
    // 初始化
    init() {
      this.$nextTick(() => {
        this.changeShowFlag();
      });
    },
    changeShowFlag() {
      this.showFlag = !this.showFlag;
    },
    // 保存
    onSave(formData) {
      this.$refs[formData].validate((valid) => {
        if (valid) {
          const url = categoryAdd;
          if (this.reqFlag.add) {
            this.reqFlag.add = false;
            let params = {
              category: this.formData.category,
              english:this.formData.english
            };
            this.$http(url, params).then((res) => {
              if (res.code == 1) {
                this.$common.toast("添加成功", "success", false);
                this.$emit("addCallBack");
                this.onCancel(formData);
              }
              this.reqFlag.add = true;
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 取消
    onCancel(formName) {
      this.changeShowFlag();
      this.$refs[formName].resetFields();
    },
    // 关闭弹出框
    closeDialog() {
      this.$refs["formData"].resetFields();
            this.formData= {
        name: "",
        photo:''
      }
      
    },
  },
};
</script>

<style lang="scss">
</style>
